2025년 8월 16일한국어

Webpack 5의 JavaScript 모듈 페더레이션으로 마이크로 프론트엔드의 강력한 기능을 활용하세요. 확장 가능하고 유지보수 용이하며 독립적인 웹 애플리케이션 구축 방법을 배워보세요.

Webpack 5를 이용한 JavaScript 모듈 페더레이션: 마이크로 프론트엔드를 위한 종합 가이드

끊임없이 진화하는 웹 개발 환경에서 크고 복잡한 애플리케이션을 구축하는 것은 어려운 과제일 수 있습니다. 기존의 모놀리식 아키텍처는 종종 개발 시간 증가, 배포 병목 현상, 코드 품질 유지의 어려움으로 이어집니다. 마이크로 프론트엔드는 이러한 문제들을 해결하기 위한 강력한 아키텍처 패턴으로 등장했으며, 팀들이 더 큰 웹 애플리케이션의 독립적인 부분들을 구축하고 배포할 수 있게 해줍니다. 마이크로 프론트엔드를 구현하기 위한 가장 유망한 기술 중 하나는 Webpack 5에서 도입된 JavaScript 모듈 페더레이션(JavaScript Module Federation)입니다.

마이크로 프론트엔드란 무엇인가?

마이크로 프론트엔드는 프론트엔드 앱을 더 작고 독립적인 단위로 분해하는 아키텍처 스타일로, 각 단위는 서로 다른 팀에 의해 자율적으로 개발, 테스트 및 배포될 수 있습니다. 각 마이크로 프론트엔드는 특정 비즈니스 도메인이나 기능을 담당하며, 런타임에 함께 구성되어 완전한 사용자 인터페이스를 형성합니다.

하나의 거대한 개발팀 대신 특정 영역에 집중하는 여러 개의 소규모 팀이 있는 회사와 같다고 생각하면 됩니다. 각 팀은 독립적으로 작업할 수 있어 개발 주기가 빨라지고 유지보수가 쉬워집니다. 아마존과 같은 대규모 전자상거래 플랫폼을 생각해보세요. 여러 팀이 제품 카탈로그, 쇼핑 카트, 결제 프로세스, 사용자 계정 관리를 각각 관리할 수 있습니다. 이 모든 것이 독립적인 마이크로 프론트엔드가 될 수 있습니다.

마이크로 프론트엔드의 장점:

독립적인 배포: 팀들은 애플리케이션의 다른 부분에 영향을 주지 않고 마이크로 프론트엔드를 독립적으로 배포할 수 있습니다. 이는 배포 위험을 줄이고 더 빠른 릴리스 주기를 가능하게 합니다.
기술 비종속성: 서로 다른 마이크로 프론트엔드는 다른 기술이나 프레임워크(예: React, Angular, Vue.js)를 사용하여 구축될 수 있습니다. 이를 통해 팀은 특정 요구에 가장 적합한 기술을 선택하고 전체 애플리케이션을 다시 작성할 필요 없이 점진적으로 새로운 기술을 채택할 수 있습니다. 한 팀은 제품 카탈로그에 React를, 다른 팀은 마케팅 랜딩 페이지에 Vue.js를, 세 번째 팀은 결제 프로세스에 Angular를 사용하는 것을 상상해보세요.
팀 자율성 향상: 팀은 자신의 마이크로 프론트엔드에 대한 완전한 소유권을 가지므로 자율성이 증가하고 의사 결정이 빨라지며 개발자 생산성이 향상됩니다.
확장성 증가: 마이크로 프론트엔드를 사용하면 개별 마이크로 프론트엔드를 다른 서버에 배포하여 애플리케이션을 수평적으로 확장할 수 있습니다.
코드 재사용성: 공유 컴포넌트와 라이브러리를 마이크로 프론트엔드 간에 쉽게 공유할 수 있습니다.
용이한 유지보수: 더 작은 코드베이스는 일반적으로 이해, 유지보수 및 디버깅하기가 더 쉽습니다.

마이크로 프론트엔드의 어려움:

복잡성 증가: 여러 마이크로 프론트엔드를 관리하는 것은 전체 아키텍처에 복잡성을 더할 수 있으며, 특히 통신, 상태 관리 및 배포 측면에서 그렇습니다.
성능 오버헤드: 여러 마이크로 프론트엔드를 로드하는 것은 성능 오버헤드를 유발할 수 있으며, 특히 제대로 최적화되지 않은 경우 더욱 그렇습니다.
공통 관심사(Cross-Cutting Concerns): 인증, 권한 부여, 테마 설정과 같은 공통 관심사를 마이크로 프론트엔드 아키텍처에서 처리하는 것은 어려울 수 있습니다.
운영 오버헤드: 여러 마이크로 프론트엔드의 배포 및 모니터링을 관리하기 위해 성숙한 DevOps 관행과 인프라가 필요합니다.

JavaScript 모듈 페더레이션이란 무엇인가?

JavaScript 모듈 페더레이션은 Webpack 5의 기능으로, 별도로 컴파일된 JavaScript 애플리케이션 간에 런타임에 코드를 공유할 수 있게 해줍니다. 이를 통해 애플리케이션의 일부를 다른 애플리케이션에서 소비할 수 있는 "모듈"로 노출할 수 있으며, npm과 같은 중앙 저장소에 게시할 필요가 없습니다.

모듈 페더레이션을 애플리케이션의 연합 생태계를 만드는 방법으로 생각할 수 있습니다. 각 애플리케이션은 자체 기능을 제공하고 다른 애플리케이션의 기능을 소비할 수 있습니다. 이는 빌드 시점의 종속성을 제거하고 진정으로 독립적인 배포를 가능하게 합니다.

예를 들어, 디자인 시스템 팀은 UI 컴포넌트를 모듈로 노출할 수 있으며, 다른 애플리케이션 팀은 npm 패키지로 설치할 필요 없이 디자인 시스템 애플리케이션에서 직접 이러한 컴포넌트를 소비할 수 있습니다. 디자인 시스템 팀이 컴포넌트를 업데이트하면 변경 사항이 모든 소비 애플리케이션에 자동으로 반영됩니다.

모듈 페더레이션의 핵심 개념:

호스트(Host): 원격 모듈을 소비하는 주 애플리케이션입니다.
원격(Remote): 다른 애플리케이션에서 소비할 수 있도록 모듈을 노출하는 애플리케이션입니다.
공유 모듈(Shared Modules): 호스트와 원격 애플리케이션 간에 공유되는 모듈입니다(예: React, Lodash). 모듈 페더레이션은 각 모듈의 단일 버전만 로드되도록 공유 모듈의 버전 관리 및 중복 제거를 자동으로 처리할 수 있습니다.
노출된 모듈(Exposed Modules): 다른 애플리케이션에서 소비할 수 있도록 제공되는 원격 애플리케이션의 특정 모듈입니다.
RemoteEntry.js: Webpack에 의해 생성되는 파일로, 원격 애플리케이션의 노출된 모듈에 대한 메타데이터를 포함합니다. 호스트 애플리케이션은 이 파일을 사용하여 원격 모듈을 발견하고 로드합니다.

Webpack 5로 모듈 페더레이션 설정하기: 실용 가이드

Webpack 5로 모듈 페더레이션을 설정하는 실제 예제를 살펴보겠습니다. 호스트(Host) 애플리케이션과 원격(Remote) 애플리케이션이라는 두 개의 간단한 애플리케이션을 만들 것입니다. 원격 애플리케이션은 컴포넌트를 노출하고, 호스트 애플리케이션은 이를 소비합니다.

1. 프로젝트 설정

애플리케이션을 위해 `host`와 `remote`라는 두 개의 별도 디렉터리를 만듭니다.

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

2. 원격 애플리케이션 구성

`remote` 디렉터리에 다음 파일들을 생성합니다:

`src/index.js`: 애플리케이션의 진입점입니다.
`src/RemoteComponent.jsx`: 노출될 컴포넌트입니다.
`webpack.config.js`: Webpack 구성 파일입니다.

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

이것은 원격 컴포넌트입니다!

원격 애플리케이션에서 렌더링되었습니다.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

기본적인 HTML 구조를 가진 `public/index.html`을 생성합니다. 중요한 것은 `

`입니다.

3. 호스트 애플리케이션 구성

`host` 디렉터리에 다음 파일들을 생성합니다:

`src/index.js`: 애플리케이션의 진입점입니다.
`webpack.config.js`: Webpack 구성 파일입니다.

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

원격 컴포넌트 로딩 중...

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

기본적인 HTML 구조를 가진 `public/index.html`을 생성합니다(원격 앱과 유사). 중요한 것은 `

`입니다.

4. Babel 설치

`host`와 `remote` 디렉터리 양쪽 모두에서 Babel 종속성을 설치합니다:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

5. 애플리케이션 실행

`host`와 `remote` 디렉터리 양쪽 모두에서 `package.json`에 다음 스크립트를 추가합니다:

```json "scripts": { "start": "webpack serve" } ```

이제 두 애플리케이션을 모두 시작합니다:

```bash cd remote npm start cd ../host npm start ```

브라우저를 열고 `http://localhost:3000`으로 이동합니다. 호스트 애플리케이션 내에 원격 컴포넌트가 렌더링된 것을 볼 수 있습니다.

주요 구성 옵션 설명:

`name`: 애플리케이션의 고유한 이름입니다.
`filename`: 노출된 모듈에 대한 메타데이터를 포함할 파일의 이름입니다(예: `remoteEntry.js`).
`exposes`: 노출할 모듈을 지정하는 모듈 이름과 파일 경로의 맵입니다.
`remotes`: 각 원격 애플리케이션의 remoteEntry.js 파일을 찾을 위치를 지정하는 원격 애플리케이션 이름과 URL의 맵입니다.
`shared`: 호스트와 원격 애플리케이션 간에 공유되어야 할 모듈 목록입니다. `singleton: true` 옵션은 각 공유 모듈의 단일 인스턴스만 로드되도록 보장합니다. `eager: true` 옵션은 공유 모듈이 즉시(즉, 다른 모듈보다 먼저) 로드되도록 보장합니다.

고급 모듈 페더레이션 기술

모듈 페더레이션은 훨씬 더 정교한 마이크로 프론트엔드 아키텍처를 구축하는 데 도움이 되는 많은 고급 기능을 제공합니다.

동적 원격(Dynamic Remotes)

Webpack 구성에 원격 애플리케이션의 URL을 하드코딩하는 대신 런타임에 동적으로 로드할 수 있습니다. 이를 통해 호스트 애플리케이션을 다시 빌드하지 않고도 원격 애플리케이션의 위치를 쉽게 업데이트할 수 있습니다.

예를 들어, 원격 애플리케이션의 URL을 구성 파일이나 데이터베이스에 저장하고 JavaScript를 사용하여 동적으로 로드할 수 있습니다.

```javascript // webpack.config.js 파일에서 remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // remoteUrl이 'http://localhost:3001/remoteEntry.js'와 같다고 가정합니다 const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // 모듈 페더레이션의 핵심은 원격 앱이 // 원격 앱에 지정된 이름으로 사용 가능하다는 것입니다 resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

이제 `?remote=http://localhost:3001/remoteEntry.js` 쿼리 매개변수를 사용하여 호스트 앱을 로드할 수 있습니다.

버전 관리되는 공유 모듈

모듈 페더레이션은 각 모듈의 호환 가능한 버전 하나만 로드되도록 공유 모듈의 버전 관리 및 중복 제거를 자동으로 처리할 수 있습니다. 이것은 많은 종속성을 가진 크고 복잡한 애플리케이션을 다룰 때 특히 중요합니다.

Webpack 구성에서 각 공유 모듈의 버전 범위를 지정할 수 있습니다.

```javascript // webpack.config.js 파일에서 shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

사용자 정의 모듈 로더

모듈 페더레이션을 사용하면 다른 소스나 다른 형식에서 모듈을 로드하는 데 사용할 수 있는 사용자 정의 모듈 로더를 정의할 수 있습니다. 이는 CDN이나 사용자 정의 모듈 레지스트리에서 모듈을 로드하는 데 유용할 수 있습니다.

마이크로 프론트엔드 간 상태 공유

마이크로 프론트엔드 아키텍처의 어려움 중 하나는 서로 다른 마이크로 프론트엔드 간에 상태를 공유하는 것입니다. 이 문제를 해결하기 위해 다음과 같은 여러 접근 방식을 취할 수 있습니다:

URL 기반 상태 관리: 상태를 URL에 저장하고 URL을 사용하여 마이크로 프론트엔드 간에 통신합니다. 이것은 간단하고 직관적인 접근 방식이지만 복잡한 상태의 경우 번거로워질 수 있습니다.
사용자 정의 이벤트(Custom events): 사용자 정의 이벤트를 사용하여 마이크로 프론트엔드 간에 상태 변경을 브로드캐스트합니다. 이는 마이크로 프론트엔드 간의 느슨한 결합을 가능하게 하지만 이벤트 구독을 관리하기 어려울 수 있습니다.
공유 상태 관리 라이브러리: Redux나 MobX와 같은 공유 상태 관리 라이브러리를 사용하여 전체 애플리케이션의 상태를 관리합니다. 이는 상태를 관리하는 중앙 집중적이고 일관된 방법을 제공하지만 특정 상태 관리 라이브러리에 대한 종속성을 유발할 수 있습니다.
메시지 브로커(Message Broker): RabbitMQ나 Kafka와 같은 메시지 브로커를 사용하여 마이크로 프론트엔드 간의 통신 및 상태 공유를 용이하게 합니다. 이것은 더 복잡한 솔루션이지만 높은 수준의 유연성과 확장성을 제공합니다.

모듈 페더레이션으로 마이크로 프론트엔드를 구현하기 위한 모범 사례

모듈 페더레이션으로 마이크로 프론트엔드를 구현할 때 염두에 두어야 할 몇 가지 모범 사례는 다음과 같습니다:

각 마이크로 프론트엔드에 대한 명확한 경계 정의: 각 마이크로 프론트엔드는 특정 비즈니스 도메인이나 기능을 책임져야 하며 잘 정의된 인터페이스를 가져야 합니다.
일관된 기술 스택 사용: 모듈 페더레이션은 서로 다른 마이크로 프론트엔드에 대해 다른 기술을 사용할 수 있게 하지만, 복잡성을 줄이고 유지보수성을 향상시키기 위해 일반적으로 일관된 기술 스택을 사용하는 것이 좋습니다.
명확한 통신 프로토콜 설정: 마이크로 프론트엔드가 서로 상호 작용하는 방식에 대한 명확한 통신 프로토콜을 정의합니다.
배포 프로세스 자동화: 마이크로 프론트엔드가 독립적이고 안정적으로 배포될 수 있도록 배포 프로세스를 자동화합니다. CI/CD 파이프라인과 코드형 인프라(Infrastructure-as-code) 도구 사용을 고려하세요.
마이크로 프론트엔드 성능 모니터링: 성능 병목 현상을 식별하고 해결하기 위해 마이크로 프론트엔드의 성능을 모니터링합니다. Google Analytics, New Relic 또는 Datadog과 같은 도구를 사용하세요.
견고한 오류 처리 구현: 애플리케이션이 장애에 탄력적으로 대처할 수 있도록 견고한 오류 처리를 구현합니다.
분산된 거버넌스 모델 채택: 전반적인 일관성과 품질을 유지하면서 팀이 자신의 마이크로 프론트엔드에 대한 결정을 내릴 수 있도록 권한을 부여합니다.

실제 세계에서의 모듈 페더레이션 적용 사례

구체적인 사례 연구는 종종 기밀이지만, 모듈 페더레이션이 매우 유용할 수 있는 몇 가지 일반적인 시나리오는 다음과 같습니다:

전자상거래 플랫폼: 앞서 언급했듯이, 대규모 전자상거래 플랫폼은 모듈 페더레이션을 사용하여 제품 카탈로그, 쇼핑 카트, 결제 프로세스 및 사용자 계정 관리를 위한 독립적인 마이크로 프론트엔드를 구축할 수 있습니다. 이를 통해 여러 팀이 이러한 기능을 독립적으로 작업하고 애플리케이션의 다른 부분에 영향을 주지 않고 배포할 수 있습니다. 글로벌 플랫폼은 원격 모듈을 통해 다른 지역에 대한 기능을 맞춤화할 수 있습니다.
금융 서비스 애플리케이션: 금융 서비스 애플리케이션은 종종 다양한 기능을 가진 복잡한 사용자 인터페이스를 가집니다. 모듈 페더레이션을 사용하여 다양한 계정 유형, 거래 플랫폼 및 보고 대시보드를 위한 독립적인 마이크로 프론트엔드를 구축할 수 있습니다. 특정 국가에 고유한 규정 준수 기능은 모듈 페더레이션을 통해 제공될 수 있습니다.
헬스케어 포털: 헬스케어 포털은 모듈 페더레이션을 사용하여 환자 관리, 예약 스케줄링 및 의료 기록 접근을 위한 독립적인 마이크로 프론트엔드를 구축할 수 있습니다. 다른 보험사나 지역을 위한 다른 모듈이 동적으로 로드될 수 있습니다.
콘텐츠 관리 시스템(CMS): CMS는 모듈 페더레이션을 사용하여 사용자가 타사 개발자의 원격 모듈을 로드하여 웹사이트에 사용자 정의 기능을 추가할 수 있도록 할 수 있습니다. 다양한 테마, 플러그인 및 위젯이 독립적인 마이크로 프론트엔드로 배포될 수 있습니다.
학습 관리 시스템(LMS): LMS는 독립적으로 개발된 과정을 모듈 페더레이션을 통해 통합된 플랫폼으로 제공할 수 있습니다. 개별 과정에 대한 업데이트는 플랫폼 전체의 재배포를 필요로 하지 않습니다.

결론

Webpack 5의 JavaScript 모듈 페더레이션은 마이크로 프론트엔드 아키텍처를 구축하는 강력하고 유연한 방법을 제공합니다. 이를 통해 별도로 컴파일된 JavaScript 애플리케이션 간에 런타임에 코드를 공유하여 독립적인 배포, 기술 다양성 및 향상된 팀 자율성을 가능하게 합니다. 이 가이드에서 설명한 모범 사례를 따르면 모듈 페더레이션을 활용하여 확장 가능하고 유지보수 용이하며 혁신적인 웹 애플리케이션을 구축할 수 있습니다.

프론트엔드 개발의 미래는 의심할 여지 없이 모듈식 및 분산 아키텍처로 기울고 있습니다. 모듈 페더레이션은 이러한 현대적인 시스템을 구축하기 위한 중요한 도구를 제공하여 팀이 더 빠른 속도, 유연성 및 복원력을 갖춘 복잡한 애플리케이션을 만들 수 있도록 합니다. 기술이 성숙해짐에 따라 훨씬 더 혁신적인 사용 사례와 모범 사례가 등장할 것으로 기대할 수 있습니다.